<template>
	<div class="role-edit">
		<el-form label-position="top" ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="80px" @keyup.enter="submitHandle()">
			<div class="cc-flex flex-h-between">
				<div class="cc-flex">
					<el-form-item prop="name" label="名称">
						<el-input v-model="dataForm.name"></el-input>
					</el-form-item>
					<!-- <div style="margin-left: 20px">
						<el-form-item prop="code" label="代码">
							<el-input v-model="dataForm.code"></el-input>
						</el-form-item>
					</div> -->
				</div>
				<el-form-item label="&nbsp">
					<el-button style="padding: 0px 30px" type="primary" @click="submitHandle()">保存</el-button>
				</el-form-item>
			</div>
			<el-form-item prop="functionIds" label="功能绑定">
				<div class="tree-content flex-h-100">
					<el-tree
						ref="functionTreeRef"
						:filter-node-method="filterNode"
						:props="treeProps"
						:data="treeData"
						node-key="id"
						show-checkbox
						@check="onAreaSelect"
						highlight-current
						default-expand-all
						:expand-on-click-node="false"
					>
						<template #default="{ data }">
							<div class="cc-flex node-item">
								<div class="title flex-h-100">
									{{ data.name }}<span class="type">{{ ` (${EFunctionTypeList.find(f => f.value == data.type)?.name})` }}</span>
								</div>
								<div class="tip cc-flex flex-0">
									<div class="offline tip-item flex-0">{{ data.code }}</div>
								</div>
							</div>
						</template>
					</el-tree>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

import { MFunction, EFunctionTypeList, MRole, PermissionService } from '@/modules/permission'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import type { ElTree } from 'element-plus'

const route = useRoute()
const treeProps = {
	label: 'name',
	children: 'children'
}

const filterText = ref('')
const functionTreeRef = ref<InstanceType<typeof ElTree>>()
const treeData = ref<MFunction[]>([])

const dataFormRef = ref<FormInstance>()
const dataForm: MRole = reactive({
	id: undefined,
	name: '',
	// code: '',
	menuIds: []
})

const dataRules = reactive<FormRules>({
	name: [{ required: true, message: '名称不能为空', trigger: ['blur', 'change'] }],
	code: [{ required: true, message: '代码不能为空', trigger: ['blur', 'change'] }],
	functionIds: [
		{ required: true, message: '请至少选择一个选择功能', trigger: ['blur', 'change'] },
		{
			validator(rule, value, callback) {
				if (!value || value.length == 0) {
					return callback(new Error('请至少选择一个选择功能'))
				}
				return callback()
			}
		}
	]
})

onMounted(() => {
	getFunctionTree()
	console.log('query', route.query.id)
})

watch(filterText, val => {
	functionTreeRef.value!.filter(val)
})

const filterNode = (value: string, data: any, child: any) => {
	if (!value) return true
	return data.name.includes(value)
}
function onAreaSelect(node: MFunction, selfCheck: boolean, hasChilden: boolean) {
	dataForm.menuIds = functionTreeRef.value!.getCheckedNodes(false, true).map(f => f.id)
}
function getFunctionTree() {
	PermissionService.getFunctionTree().then((res: any) => {
		treeData.value = res
	})
}

// 表单提交
function submitHandle() {
	dataFormRef.value?.validate((valid: boolean) => {
		console.log('dataForm:', dataForm)
		if (!valid) {
			return false
		}

		PermissionService.editRoleItem(dataForm).then(() => {
			// emit('refreshDataList')
			ElMessage.success({
				message: '操作成功'
			})
		})
	})
}
</script>

<style scoped lang="scss">
.role-edit {
	.tree-content {
		:deep(.el-tree-node__content) {
			height: 36px !important;
			border-bottom: 1px solid #f1f1f1;
		}
		.node-item {
			width: 100%;
			.tip {
				width: 600px;
				.title {
					color: #888;
				}
			}
			.type {
				color: #aaa;
			}
		}
	}
}
</style>
